<template>
	<view>
		<canvas
			id="canvas"
			canvas-id="canvas"
			:style="{ width: posterWidth + 'px', height: posterHeight + 'px', position: 'fixed', zIndex: '-10', left: '0', top: '-9999px' }"
		></canvas>
		<view class="poster_bg" id="posterBg">
			<image :src="bigBacImg" class="bg_img" id="bigBacImg" @click="scanerQr"></image>
			<image :src="avatarUrl" class="avatarUrl" id="avatarUrl"></image>
			<text class="name" id="nickName">{{ nickName }}</text>
			<text class="m_time" id="mTime">{{ mTime }}</text>
			<text class="y_time" id="yTime">{{ yTime }}</text>
			<view class="super_num">
				<text class="red_num" id="time1">{{ time1 }}</text>
				<text id="topText1" v-if="result == 'success'">{{ topText1 }}</text>
				<text id="failText" v-else>{{ failText }}</text>
				<text class="red_num" id="overPerson">{{ overPerson }}</text>
				<text id="topText2">人</text>
			</view>
			<text class="num num1" id="num1">{{ num1 }}</text>
			<text class="num num2" id="num2">{{ num2 }}</text>
			<text class="num num3" id="num3">{{ num3 }}</text>
			<text class="num_text num1" id="numText1">成功解谜(个)</text>
			<text class="num_text num2" id="numText2">收到福卡(张)</text>
			<text class="num_text num3" id="numText3">点亮城市(个)</text>

			<view class="wish_text" id="wishText">{{ wishText }}</view>
			<view class="answer_time">
				<text class="green_text" id="greenText"></text>
				<text class="red_num" id="redText">"幸福福袋"</text>
			</view>
			<view class="question" id="question">{{ question }}</view>
			<view class="join_num">
				<text id="bottomText1">{{ bottomText1 }}</text>
				<text class="red_num" id="joinNum">{{ joinNum }}</text>
				<text id="bottomText2">人</text>
			</view>
			<image :src="qrCodeImg" id="qrCode" class="qr_code"></image>
		</view>
		<view class="share_btns">
			<!--#ifdef H5-->
			<button :id="'1'" v-if="result == 'fail'" class="share_btn" style="background-color:#fff;" @click="open_share_tip">分享给好友</button>

			<button :id="'2'" v-else @click="open_share_tip" class="share_btn" style="background-color:#fff;">炫耀一下</button>
			<!--#endif-->
			<!--#ifdef MP-WEIXIN-->
			<button :id="'1'" v-if="result == 'fail'" open-type="share" class="share_btn" style="background-color:#fff;">分享好友</button>

			<button :id="'2'" v-else open-type="share" class="share_btn" style="background-color:#fff;">炫耀一下</button>
			<!--#endif-->
			<!--#ifdef MP-WEIXIN-->
			<view class="share_btn" @click="saveCard">保存福卡</view>
			<!--#endif-->

			<!-- #ifdef H5 -->
			<!-- 分享提示 -->
			<uni-popup ref="shareTip" :custom="true">
				<view class="popup_box_de_share"><image class="popup_box_close_share" src="/static/share_tip.png"></image></view>
			</uni-popup>
			<!-- #endif -->
		</view>
	</view>
</template>
<script>
import uniPopup from '@/components/uni-popup/uni-popup.vue';
let posterData = {
	posterBg: null,
	bigBacImg: null,
	nickName: null,
	avatarUrl: null,
	qrCode: null,
	mTime: null,
	yTime: null,
	time1: null,
	overPerson: null,
	topText2: null,
	numText1: null,
	numText2: null,
	numText3: null,
	num1: null,
	num2: null,
	num3: null,
	wishText: null,
	greenText: null,
	redText: null,
	question: null,
	bottomText1: null,
	joinNum: null,
	bottomText2: null
};
let systemInfo = null;
let query = null;
export default {
	components: { uniPopup },

	onShareAppMessage(res) {
		console.log('点击分享', res);
		if (res.target.id == 1) {
			//分享好友
			if (this.answerCount == 1) {
				//失败一次
				this.$store.commit('updataTodayRidd', true);
				let data = {
					token: this.$store.getters.getToken,
					share_id: Math.random()
						.toString(15)
						.substr(2),
					user_top_id: this.user_top_id,
					isNoNeedLoading: true
				};
				this.$api
					.share_daily(data)
					.then(res => {
						console.log('失败分享一次', res);
					})
					.catch(err => {
						console.log('失败分享一次', err);
					});
			}
			return {
				title: '这个谜题真的太难啦！请你助我一臂之力！',
				path: '/pages/home/home?share_id=' + this.$store.getters.getUserId + '&fromJin=2',
				imageUrl: 'https://lightplanet.tuanhaoke.cn/img/tupian.png'
			};
		} else {
			//炫耀一下
			let data = {
				token: this.$store.getters.getToken,
				share_id: Math.random()
					.toString(15)
					.substr(2),
				isNoNeedLoading: true
			};
			this.$api
				.share_daily(data)
				.then(res => {
					if (res.status) {
						this.$store.commit('updataCanDoublePrize', true); //可以翻倍奖励
					}
					console.log('福袋分享炫耀接口', res);
				})
				.catch(err => {
					console.log('福袋分享炫耀接口', err);
				});
			return {
				title: '我正在参与“每日解谜”，快来一起参与吧！',
				path: '/pages/home/home?share_id=' + this.$store.getters.getUserId,
				imageUrl: 'https://lightplanet.tuanhaoke.cn/img/tupian.png'
			};
		}
	},
	data() {
		return {
			token: this.$store.getters.getToken,
			// 答题的结果
			result: 'fail',
			// 生成的海报的本地路径
			h5share_flage: null,
			generatePosterUrl: '',
			posterTop: 0,
			qrCodeImg: '',
			posterWidth: 0,
			posterHeight: 0,
			avatarUrl: '',
			shareImg: null,
			nickName: '',
			bigBacImg: 'https://lightplanet.tuanhaoke.cn/img/lucy_card_bg.png',
			mTime: '02',
			yTime: '02/2020',
			time1: '06:09:23',
			topText1: '早安解谜成功，超越',
			failText: '早安打卡成功，超越',
			overPerson: '',
			num1: '0',
			num2: '0',
			num3: '0',
			wishText: '',
			greenText: '',
			question: '',
			bottomText1: '今日参与早安解谜',
			joinNum: '',
			// 答题次数
			answerCount: 0,
			user_top_id: 0,
			info: {
				blessing_today: '',
				current_people_num: '',
				foka_number: '',
				light_up_city: '',
				puzzle_number: '',
				title: '',
				surpass: ''
			}
		};
	},
	onLoad(options) {
		let nowTime = new Date();
		let y = nowTime.getFullYear();
		let m = nowTime.getMonth() + 1 >= 10 ? nowTime.getMonth() + 1 : '0' + (parseInt(nowTime.getMonth()) + 1);
		this.mTime = (nowTime.getDate() >= 10 ? nowTime.getDate() : '0' + nowTime.getDate()).toString();
		let h = nowTime.getHours() >= 10 ? nowTime.getHours() : '0' + nowTime.getHours();
		let f = nowTime.getMinutes() >= 10 ? nowTime.getMinutes() : '0' + nowTime.getMinutes();
		let s = nowTime.getSeconds() >= 10 ? nowTime.getSeconds() : '0' + nowTime.getSeconds();
		this.time1 = h + ':' + f + ':' + s;
		this.yTime = m + '/' + y;
		if (options.result != undefined) {
			this.result = options.result;
			if (this.result == 'success') {
				posterData.topText1 = null;
			} else {
				this.answerCount = options.count;
				this.user_top_id = options.user_top_id;
				posterData.failText = null;
			}
		}
		try {
			const res = uni.getStorageSync('userInfo');
			if (res) {
				this.nickName = res.nickName;
				this.avatarUrl = res.avatarUrl;
			}
		} catch (e) {
			this.nickName = this.$store.state.nickName;
			this.avatarUrl = this.$store.state.avatarUrl;
		}
		uni.getSystemInfo({
			success: function(res) {
				systemInfo = res;
			}
		});
		console.log('加载.......');
		this.drawCanvas();
	},
	methods: {
		// H5 分享
		H5share(){
			if (this.result == 'fail') {
				//分享好友
				if (this.answerCount == 1) {
					//失败一次
					this.$store.commit('updataTodayRidd', true);
					let data = {
						token: this.$store.getters.getToken,
						share_id: Math.random()
							.toString(15)
							.substr(2),
						user_top_id: this.user_top_id,
						isNoNeedLoading: true
					};
					this.$api
						.share_daily(data)
						.then(res => {
							console.log('失败分享一次', res);
						})
						.catch(err => {
							console.log('失败分享一次', err);
						});
				}
				let link=this.$store.state.H5URL+'pages/home/home?share_id=' + this.$store.getters.getUserId + '&fromJin=2'
				let share_detail = '这是每日解谜-幸运福卡-分享给好友的分享详情'
				this.share('这个谜题真的太难啦！请你助我一臂之力！',share_detail, 'https://lightplanet.tuanhaoke.cn/img/tupian.png',link=link)
				
			} else {
				//炫耀一下
				let data = {
					token: this.$store.getters.getToken,
					share_id: Math.random()
						.toString(15)
						.substr(2),
					isNoNeedLoading: true
				};
				this.$api
					.share_daily(data)
					.then(res => {
						if (res.status) {
							this.$store.commit('updataCanDoublePrize', true); //可以翻倍奖励
						}
						console.log('福袋分享炫耀接口', res);
					})
					.catch(err => {
						console.log('福袋分享炫耀接口', err);
					});
					
					let link=this.$store.state.H5URL+'pages/home/home?share_id=' + this.$store.getters.getUserId
					let share_detail = '这是每日解谜-幸运福卡-炫耀一下的分享详情'
					this.share('我正在参与“每日解谜”，快来一起参与吧！',share_detail, 'https://lightplanet.tuanhaoke.cn/img/tupian.png',link=link)
			}
		},
		
		open_share_tip() {
				this.$refs.shareTip.open();
		},
		getInfo() {
			return new Promise((resolve, reject) => {
				let data = {
					token: this.token,
					page: '/pages/home/home?share_id=' + this.$store.getters.getUserId + '&fromJin=2'
				};
				this.$api
					.getLuckyCardInfo(data)
					.then(res => {
						console.log('拿到的福卡数据', res);
						if (res.status) {
							this.info = res.data;
							this.num1 = this.info.puzzle_number.toString();
							this.num2 = this.info.foka_number.toString();
							this.num3 = this.info.light_up_city.toString();
							this.wishText = this.info.blessing_today;
							this.overPerson = this.info.surpass.toString();
							this.question = this.info.title;
							this.joinNum = this.info.current_people_num.toString();
							this.shareImg = this.$store.state.URL+ this.info.thum_qr_code_url;
							resolve(res.data.path);
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
						// #ifdef H5
						this.H5share()
						// #endif
					})
					.catch(err => {
						console.log('拿到的福卡数据', err);
						reject();
					});
			});
		},
		scanerQr() {
			uni.previewImage({
				// #ifdef MP-WEIXIN
				urls: [this.generatePosterUrl],
				// #endif
				// #ifdef H5
				urls: [this.shareImg],
				// #endif
				current: 0,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {},
					fail: function(err) {
						console.log(err.errMsg);
					}
				}
			});
		},
		downloadImg(url) {
			console.log('下载图片downloadImg  url', url);
			return new Promise((resolve, reject) => {
				uni.downloadFile({
					url: url,
					success: res => {
						if (res.statusCode === 200) {
							resolve(res.tempFilePath);
						} else {
							reject();
						}
					},
					fail: e => {
						console.log('下载图片失败', e);
						reject();
					}
				});
			});
		},
		getposterBg() {
			return new Promise((resolve, reject) => {
				let data = {
					goodId: 90035,
					merchantID: 1,
					page: 'pages/productDetails/productDetails',
					token: '7eLahEBRMiQnxCVmkoP6'
				};
				this.$api
					.get_poster_image(data)
					.then(res => {
						resolve(res.imgurl);
					})
					.catch(err => {
						console.log(err);
						reject();
					});
			});
		},
		drawCanvas() {
			let self = this;
			this.getInfo()
				.then(res => {
					console.log('数据拿到了?????', res);
					// #ifdef MP-WEIXIN
					uni.showLoading({
						title: '海报生成中',
						mask: true
					});
					// #endif
					console.log('海报图片-------', res);
					this.qrCodeImg = res;
					let p1 = this.downloadImg(this.qrCodeImg);
					let p2 = this.downloadImg(this.bigBacImg);
					let p3 = this.downloadImg(this.avatarUrl);
					Promise.all([p1, p2, p3])
						.then(([qrCodeImg, bigBacImg, avatarUrl]) => {
							query = uni.createSelectorQuery().in(self);
							query.select('#posterBg').boundingClientRect(data => {
								posterData.posterBg = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#bigBacImg').boundingClientRect(data => {
								posterData.bigBacImg = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#nickName').boundingClientRect(data => {
								posterData.nickName = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#mTime').boundingClientRect(data => {
								posterData.mTime = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#yTime').boundingClientRect(data => {
								posterData.yTime = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left + 2
								};
							});
							query.select('#time1').boundingClientRect(data => {
								posterData.time1 = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							if (self.result == 'success') {
								query.select('#topText1').boundingClientRect(data => {
									posterData.topText1 = {
										width: data.width,
										height: data.height,
										top: data.top,
										left: data.left
									};
								});
							} else {
								query.select('#failText').boundingClientRect(data => {
									posterData.failText = {
										width: data.width,
										height: data.height,
										top: data.top,
										left: data.left
									};
								});
							}
							query.select('#overPerson').boundingClientRect(data => {
								posterData.overPerson = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#topText2').boundingClientRect(data => {
								posterData.topText2 = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#numText1').boundingClientRect(data => {
								posterData.numText1 = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#numText2').boundingClientRect(data => {
								posterData.numText2 = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#numText3').boundingClientRect(data => {
								posterData.numText3 = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#num1').boundingClientRect(data => {
								posterData.num1 = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#num2').boundingClientRect(data => {
								posterData.num2 = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#num3').boundingClientRect(data => {
								posterData.num3 = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#avatarUrl').boundingClientRect(data => {
								posterData.avatarUrl = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#wishText').boundingClientRect(data => {
								posterData.wishText = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#greenText').boundingClientRect(data => {
								posterData.greenText = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#redText').boundingClientRect(data => {
								posterData.redText = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#question').boundingClientRect(data => {
								posterData.question = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#bottomText1').boundingClientRect(data => {
								posterData.bottomText1 = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#joinNum').boundingClientRect(data => {
								posterData.joinNum = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#bottomText2').boundingClientRect(data => {
								posterData.bottomText2 = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.select('#qrCode').boundingClientRect(data => {
								posterData.qrCode = {
									width: data.width,
									height: data.height,
									top: data.top,
									left: data.left
								};
							});
							query.exec(data => {
								let x = posterData.posterBg.left;
								let y = posterData.posterBg.top;
								self.posterWidth = posterData.posterBg.width;
								self.posterHeight = posterData.posterBg.height;
								console.log('posterData posterData posterData', posterData);
								for (let key in posterData) {
									posterData[key].left -= x;
									posterData[key].top -= y;
								}
								const context = uni.createCanvasContext('canvas', self);

								context.drawImage(bigBacImg, posterData.bigBacImg.left, posterData.bigBacImg.top, posterData.bigBacImg.width, posterData.bigBacImg.height);

								context.setTextAlign('left');
								context.setTextBaseline('top');
								context.setFontSize(uni.upx2px(30));
								context.fillStyle = '#333';
								self.drawText(context, self.nickName, posterData.nickName.left, posterData.nickName.top + 2, posterData.nickName.width, 30, 1.2);

								context.setFontSize(uni.upx2px(38));
								context.fillStyle = '#fff';
								self.drawText(context, self.mTime, posterData.mTime.left, posterData.mTime.top + 4, posterData.mTime.width + 4, 38, 1.2);

								context.setFontSize(uni.upx2px(22));
								context.fillStyle = '#fff';
								self.drawText(context, self.yTime, posterData.yTime.left - 2, posterData.yTime.top, posterData.yTime.width + 4, 22, 1.2);

								context.setFontSize(uni.upx2px(24));
								context.fillStyle = '#FF5C46';
								self.drawText(context, self.time1, posterData.time1.left, posterData.time1.top + 4, posterData.time1.width + 4, 24, 1.2);
								self.drawText(context, self.overPerson, posterData.overPerson.left, posterData.overPerson.top + 4, posterData.overPerson.width + 6, 24, 1.2);

								context.fillStyle = '#666';
								if (self.result == 'success') {
									self.drawText(context, self.topText1, posterData.topText1.left, posterData.topText1.top + 4, posterData.topText1.width + 4, 24, 1.2);
								} else {
									self.drawText(context, self.failText, posterData.failText.left, posterData.failText.top + 4, posterData.failText.width + 4, 24, 1.2);
								}
								self.drawText(context, '人', posterData.topText2.left, posterData.topText2.top + 4, posterData.topText2.width + 4, 24, 1.2);

								context.fillStyle = '#999';
								self.drawText(context, '成功解谜(个)', posterData.numText1.left + 2, posterData.numText1.top, posterData.numText1.width, 24, 1.2);
								self.drawText(context, '收到福卡(张)', posterData.numText2.left, posterData.numText2.top, posterData.numText2.width, 24, 1.2);
								self.drawText(context, '点亮城市(个)', posterData.numText3.left + 8, posterData.numText3.top, posterData.numText3.width, 24, 1.2);

								context.setFontSize(uni.upx2px(36));
								context.fillStyle = '#333';
								self.drawText(context, self.num1, posterData.num1.left + 20, posterData.num1.top, posterData.num1.width, 36, 1.2);
								self.drawText(context, self.num2, posterData.num2.left + 20, posterData.num2.top, posterData.num2.width, 36, 1.2);
								self.drawText(context, self.num3, posterData.num3.left + 30, posterData.num3.top, posterData.num3.width, 36, 1.2);
								console.log('self.wishText', self.wishText);
								context.setFontSize(uni.upx2px(28));
								context.fillStyle = '#fff';
								self.drawText(context, self.wishText, posterData.wishText.left, posterData.wishText.top, posterData.wishText.width, 28, 1.2);

								context.setFontSize(uni.upx2px(24));
								context.fillStyle = '#00A66A';
								self.drawText(context, self.greenText, posterData.greenText.left, posterData.greenText.top, posterData.greenText.width + 4, 24, 1.2);

								context.setFontSize(uni.upx2px(24));
								context.fillStyle = '#FF5C46';
								self.drawText(context, `"幸福福袋"`, posterData.redText.left, posterData.redText.top, posterData.redText.width, 24, 1.2);

								context.setFontSize(uni.upx2px(28));
								context.fillStyle = '#333';
								self.drawText(context, self.question, posterData.question.left, posterData.question.top, posterData.question.width, 28, 1.2);

								context.fillStyle = '#666';
								self.drawText(context, self.bottomText1, posterData.bottomText1.left, posterData.bottomText1.top, posterData.bottomText1.width, 28, 1.2);
								self.drawText(context, '人', posterData.bottomText2.left, posterData.bottomText2.top, posterData.bottomText2.width, 28, 1.2);

								context.fillStyle = '#FF5C46';
								self.drawText(context, self.joinNum, posterData.joinNum.left, posterData.joinNum.top, posterData.joinNum.width + 4, 28, 1.2);

								context.closePath();
								context.stroke();
								//商品详情页面二维码
								context.drawImage(qrCodeImg, posterData.qrCode.left, posterData.qrCode.top, posterData.qrCode.width, posterData.qrCode.height);

								context.save();
								context.beginPath();
								context.arc(
									posterData.avatarUrl.left + posterData.avatarUrl.width / 2,
									posterData.avatarUrl.top + posterData.avatarUrl.height / 2,
									posterData.avatarUrl.height / 2,
									0,
									2 * Math.PI
								);
								context.clip();
								context.drawImage(avatarUrl, posterData.avatarUrl.left, posterData.avatarUrl.top, posterData.avatarUrl.width, posterData.avatarUrl.height);
								context.restore();

								context.draw(false, () => {
									setTimeout(() => {
										self.generatePoster();
									}, 100);
								});
								query = null;
							});
						})
						.catch(e => {
							// #ifdef MP-WEIXIN
							uni.showToast({
								title: '海报生成失败,请重试',
								icon: 'none',
								duration: 1500
							});
							// #endif
						});
				})
				.catch(e => {
					// #ifdef MP-WEIXIN
					uni.showToast({
						title: '海报生成失败,请重试',
						icon: 'none',
						duration: 1500
					});
					// #endif
				});
		},
		generatePoster() {
			let self = this;
			uni.canvasToTempFilePath(
				{
					x: 0,
					y: 0,
					width: self.posterWidth,
					height: self.posterHeight,
					destWidth: self.posterWidth * systemInfo.pixelRatio,
					destHeight: self.posterHeight * systemInfo.pixelRatio,
					quality: 1,
					canvasId: 'canvas',
					success: function(res) {
						console.log(res, '9999999999999999');
						uni.hideLoading();
						self.generatePosterUrl = res.tempFilePath;
						let shareBottomHeight, generateposterBgHeight;
						self.$nextTick(() => {
							query = uni.createSelectorQuery().in(self);
							query.exec(data => {
								self.posterTop = systemInfo.windowHeight / 2;
								query = null;
							});
						});
					},
					fail(e) {
						uni.hideLoading();
						console.log('00000000', e);
						// uni.showToast({
						// 	title: '海报生成失败，请重试',
						// 	duration: 1500,
						// 	icon: 'none'
						// });
						setTimeout(()=>{
							this.generatePoster()
						},1000)
					}
				},
				self
			);
		},
		drawText(context, t, x, y, w, s, lineHeight) {
			var chr = t.split('');
			var temp = '';
			var row = [];
			for (var a = 0; a < chr.length; a++) {
				if (context.measureText(temp).width < w && context.measureText(temp + chr[a]).width <= w) {
					temp += chr[a];
				} else {
					row.push(temp);
					temp = chr[a];
				}
			}
			row.push(temp);

			if (row.length > 6) {
				row[5] = row[5].split('');
				row[5].pop();
				row[5].push('...');
				row[5] = row[5].join('');
			}
			for (var b = 0; b < row.length; b++) {
				if (b <= 5) {
					context.fillText(row[b], x, y + b * uni.upx2px(s) * lineHeight);
				} else {
					break;
				}
			}
		},
		saveCard() {
			console.log('保存福卡图片.....', this.generatePosterUrl);
			let that = this;
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success() {
					uni.saveImageToPhotosAlbum({
						filePath: that.generatePosterUrl,
						success: function(res) {
							uni.showToast({
								title: '保存福卡成功！',
								icon: 'none',
								duration: 2000
							});
							console.log('保存福卡成功！');
						},
						fail: function(err) {
							console.log('保存失败', err);
							uni.showToast({
								title: '保存失败，请确认是否授权相册！',
								icon: 'none',
								duration: 2000
							});
						}
					});
				},
				fail() {
					uni.showModal({
						content: '拒绝授权相册权限后无法成功保存福卡，是否重新授权？',
						confirmColor: '#00A66A',
						success: function(res) {
							if (res.confirm) {
								uni.openSetting({
									success(res) {
										console.log(res.authSetting);
									}
								});
							} else if (res.cancel) {
							}
						}
					});
				}
			});
		}
	}
};
</script>
<style lang="scss">
.poster_bg {
	width: 100%;
	height: 1284upx;
	position: relative;
	.num {
		color: #333;
		font-size: 36upx;
		width: 160upx;
		position: absolute;
		text-align: center;
		font-weight: 550;
		top: 360upx;
	}
	.red_num {
		color: #ff5c46;
		font-weight: 550;
	}
	.green_text {
		color: #00a66a;
		font-weight: 550;
	}
	.num1 {
		left: 68upx;
	}
	.num2 {
		left: 306upx;
	}
	.num3 {
		right: 70upx;
	}
	.bg_img {
		width: 100%;
		height: 100%;
	}
	.num_text {
		font-size: 24upx;
		color: #999;
		width: 160upx;
		position: absolute;
		text-align: center;
		top: 410upx;
	}
	.avatarUrl {
		width: 80upx;
		height: 80upx;
		border-radius: 50%;
		position: absolute;
		top: 174upx;
		left: 68upx;
	}
	.name {
		font-size: 30upx;
		color: #333;
		position: absolute;
		left: 168upx;
		top: 196upx;
	}
	.m_time {
		height: 52upx;
		// line-height: 52upx;
		font-size: 38upx;
		color: #fff;
		position: absolute;
		right: 86upx;
		top: 160upx;
	}
	.y_time {
		font-size: 22upx;
		color: #fff;
		position: absolute;
		// right: 62upx;
		right: 64upx;
		top: 214upx;
	}
	.super_num {
		width: 620upx;
		height: 48upx;
		line-height: 48upx;
		text-align: center;
		font-size: 24upx;
		position: absolute;
		left: 68upx;
		top: 284upx;
	}
	.wish_text {
		width: 610upx;
		// height: 184upx;
		position: absolute;
		left: 68upx;
		top: 596upx;
		font-size: 28upx;
		color: #fff;
		display: flex;
		// align-items: center;
		overflow: hidden;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		-webkit-box-orient: vertical;
		white-space: normal !important;
	}
	.answer_time {
		width: 630upx;
		height: 34upx;
		font-size: 24upx;
		position: absolute;
		left: 68upx;
		top: 932upx;
		text-align: center;
	}
	.question {
		width: 630upx;
		height: 40upx;
		font-size: 28upx;
		position: absolute;
		left: 68upx;
		bottom: 270upx;
		text-align: center;
		font-weight: 550;
	}
	.join_num {
		font-size: 28upx;
		color: #666;
		position: absolute;
		left: 48upx;
		bottom: 130upx;
	}
	.qr_code {
		width: 142upx;
		height: 142upx;
		position: absolute;
		right: 58upx;
		bottom: 48upx;
	}
}
.share_btns {
	width: 100%;
	height: 100upx;
	background-color: #fff;
	border-top-left-radius: 16upx;
	border-top-right-radius: 16upx;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.share_btn {
	width: 324upx;
	height: 80upx;
	border-radius: 40upx;
	font-size: 30upx;
	color: #00a66a;
	text-align: center;
	line-height: 80upx;
	border: 2upx solid #00a66a;
	font-weight: 550;
}
/* 分享提示 */
.popup_box_de_share {
	width: 100%;
	height: 100%;
}
.popup_box_close_share {
	width: 300upx;
	height: 300upx;
	position: fixed;
	top: 10upx;
	right: 10upx;
}
.popup_box_title {
	display: flex;
	justify-content: space-between;
}
.popup_box_title > view:nth-child(2) {
	color: #333333;
	font-size: 34upx;
}
.popup_box_title_tip {
	color: #999999;
	font-size: 24upx;
	text-align: center;
	margin-top: 10upx;
}
.popup_box_tip {
	color: #666666;
	font-size: 26upx;
	text-align: center;
}
.popup_box_title > .line {
	width: 84upx;
	height: 2upx;
	border-top: 1upx solid #dedede;
	margin-top: 24upx;
}
.popup_box_de {
	width: 592upx;
	height: 744upx;
	position: relative;
	z-index: 999;
}
.popup_box_close {
	width: 52upx;
	height: 52upx;
	position: absolute;
	top: 0;
	right: 0;
}
.popup_box_content {
	width: 100%;
	height: 682upx;
	background: #ffffff;
	position: absolute;
	top: 72upx;
	left: 0;
	border-radius: 16upx;
	z-index: 999;
	padding: 40upx 46upx;
	box-sizing: border-box;
}
.popup_box_content > image {
	width: 388upx;
	height: 386upx;
	margin: 24upx auto 0;
	margin-left: 40upx;
}
</style>
